
import React, { useEffect, useState } from 'react';
import { Button, Modal, Form, Input, Divider, Table, Space, Tag, notification } from 'antd';
import BloodSugerEcharts from './BloodSugerEcharts';
import type { ColumnsType } from 'antd/es/table';
import { useForm } from 'antd/es/form/Form';
import type { DatePickerProps } from 'antd';
import { DatePicker } from 'antd';
import { useSelector, useDispatch } from 'react-redux';
import moment from 'moment';
import Index from '../../../../../../api/Inedx';
interface Props { }


interface DataType {
    key: number;
    bsId: number;
    bsTime: string;
    bsValue: number;
    residentId: number;
    datasorigin: string;
}


function BloodSuger(props: Props) {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [form] = useForm()
    const [bsId, setBsId] = useState("")
    const dispatch = useDispatch()
    const BloodSurgeList = useSelector((state: any) => { return state.WTreducer.BloodSurgeList })
    const residentId = useSelector((state: any) => { return state.WTreducer.residentId })


    let getBloodSurgeList = async () => {//查询用户血糖列表
        let res = await Index.Resident.GetBloodSurgeList({ residentId: residentId })
        console.log(res);
        if (res.data.code === "200") {
            res.data.data.map((item: any) => {
                item.key = item.bsId
                item.datasorigin = "用户记录"
            })
            dispatch({ type: "SAVE_BlOODSURGELIST", payload: res.data.data })
        } else {
            dispatch({ type: "SAVE_BlOODSURGELIST", payload: res.data.data })
        }
    }







    const set = async (row: any) => {
        setIsModalOpen(true);
        form.setFieldValue("bsValue", row.bsValue);
        setBsId(row.bsId)
    }
    const onFinish = async (value: any) => {
        // console.log(value);
        setIsModalOpen(false);
        let bsTime = moment(value.bsTime._d).format("YYYY-MM-DD HH:mm:ss")//处理时间格式
        let res = await Index.Resident.SetBloodSurge({ residentId, bsId, bsTime, bsValue: value.bsValue })//发请求
        console.log(res);
        if (res.data.code === "200") {
            getBloodSurgeList()//请求成功调获取接口,刷新表格
            setIsModalOpen(false);//关闭对话框
            notification.success({ message: res.data.message })
        } else {
            notification.error({ message: "修改失败!" })
        }
    }


    const deletes = async (bsId: any, residentId: any) => {
        let res = await Index.Resident.DeleteBloodSurge({ residentId, bsId })
        console.log(res);
        if (res.data.code === "200") {
            getBloodSurgeList()//请求成功调获取接口,刷新表格
            notification.success({ message: res.data.message })
        } else {
            notification.error({ message: "删除失败!" })
        }
    }









    const columns: ColumnsType<DataType> = [
        {
            title: '测量时间',
            dataIndex: 'bsTime',
            key: 'bsTime',
        },
        {
            title: '数值(mmol/L)',
            dataIndex: 'bsValue',
            key: 'bsValue',
        },
        {
            title: '评估',
            key: 'test',
            render: (_, record: any) => {
                if (record.bsValue < 3.9) {
                    return (<Tag color="gold">偏低</Tag>)
                } else if (record.bsValue >= 3.9 && record.bsValue <= 6.1) {
                    return (<Tag color="green">正常</Tag>)
                } else if (record.bsValue >= 6.1 && record.bsValue <= 10) {
                    return <Tag color="cyan">偏高</Tag>
                } else {
                    return (<Tag color="error">建议尽快就医</Tag>)
                }
            }
        },
        {
            title: '数据来源',
            key: 'datasorigin',
            dataIndex: 'datasorigin',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => { set(record) }}>编辑</a>
                    <a onClick={() => { deletes(record.bsId, record.residentId) }}>删除</a>
                </Space>
            ),
        },
    ];

    const data: DataType[] = BloodSurgeList



    const handleOk = () => {
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };
    let onChange: DatePickerProps['onChange'] = (date, dateString) => {
        console.log(date, dateString);
    };











    return (
        <div className="card">
            <div className='left'>
                <BloodSugerEcharts></BloodSugerEcharts>
            </div>
            <Divider type='vertical'></Divider>
            <div className='right'>
                <span className='title32'>血糖记录</span>
                <Table columns={columns} dataSource={data} scroll={{ y: 400, x: 0 }} />
            </div>
            <Modal title="编辑" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} footer={false}>
                <Form layout="vertical" onFinish={(value) => { onFinish(value) }} form={form}>
                    <Form.Item
                        label="测量时间"
                        name="bsTime"
                        rules={[{ required: true, message: '请输入时间' }]}
                    >
                        <DatePicker onChange={onChange} placeholder="请输入日期" />
                    </Form.Item>
                    <Form.Item
                        label="数值"
                        name="bsValue"
                        rules={[{ required: true, message: '请输入数值' }]}
                    >
                        <Input placeholder="请输入" />
                    </Form.Item>
                    <Form.Item>
                        <Button type='primary' htmlType='submit'>保存</Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
}

export default BloodSuger;